<template>
  <div class="lg:gap-6 flex overflow-hidden flex-col gap-3">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.card') }}
      </h2>
      <div class="lg:flex hidden gap-2 items-center" v-if="cards.length > 7">
        <div
          class="size-[2rem] bg-white rounded-[1.06rem] border flex justify-center items-center cursor-pointer hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
          @click="scrollHotCards('left')"
          :class="isLeftDisabled ? '!cursor-not-allowed opacity-50' : ''"
        >
          <i class="el-icon-arrow-left" :class="isLeftDisabled ? 'text-gray-500' : 'text-[#000000]'"></i>
        </div>
        <div
          class="size-[2rem] bg-white rounded-[1.06rem] border flex justify-center items-center cursor-pointer hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
          @click="scrollHotCards('right')"
          :class="isRightDisabled ? '!cursor-not-allowed opacity-50' : ''"
        >
          <i class="el-icon-arrow-right" :class="isRightDisabled ? 'text-gray-500' : 'text-[#000000]'"></i>
        </div>
      </div>
    </div>
    <div
      ref="hotCardContainer"
      @scroll="updateScrollButtons"
      class="flex overflow-x-scroll flex-nowrap lg:gap-14 *:lg:w-[calc((100%-6*56px)/7)] *:max-lg:w-1/3 gap-3 scroll-smooth transition-all duration-300"
    >
      <nuxt-link
        :prefetch="false"
        class="group flex flex-col flex-none gap-2 cursor-pointer"
        v-for="(i, k) in cards"
        :key="k"
        :to="localePath(`/cards/${i.code}`)"
      >
        <div class="aspect-square bgg overflow-hidden p-1">
          <div class="size-full overflow-hidden border rounded-[0.75rem] relative">
            <img
              class="group-hover:scale-110 size-full object-cover transition-all duration-300"
              :src="$globalFn.imgPrefixUrl(i.pic_image || '', 'goods_thumb_1_1')"
              :title="`${i?.name}`"
              :alt="`${i?.name}`"
            />
            <img src="~/assets/img/bg-white.png" class="inset-1/3 -top-[5.9px] absolute z-10 w-1/3 h-auto" alt="" />
          </div>
        </div>
        <h3 class="font-medium text-[.75rem] text-[#09090B] line-clamp-2 text-center">
          {{ i?.name || '' }}
        </h3>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HotCards',
    props: {
      cards: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        isLeftDisabled: true,
        isRightDisabled: false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.updateScrollButtons()
      })
    },
    methods: {
      updateScrollButtons() {
        const container = this.$refs.hotCardContainer
        if (!container) return
        this.isLeftDisabled = container.scrollLeft <= 0
        // 添加1px的容差值，避免小数点误差导致的判断问题
        const tolerance = 10
        this.isRightDisabled = container.scrollLeft + tolerance >= container.scrollWidth - container.clientWidth
      },
      scrollHotCards(direction) {
        const container = this.$refs.hotCardContainer
        const scrollAmount = container.clientWidth * 0.7
        if (direction === 'left' && !this.isLeftDisabled) {
          container.scrollLeft -= scrollAmount
        } else if (direction === 'right' && !this.isRightDisabled) {
          container.scrollLeft += scrollAmount
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .bgg {
    background: linear-gradient(180deg, #ffffff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  }
</style>
